<!--
 * @Author: Shber
 * @Date: 2024-07-10 17:27:07
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-12 16:43:25
 * @Description: 
-->
<template>
  <uni-popup ref="popup" :is-mask-click="isMaskClick" border-radius="8px 8px 0 0" type="bottom" background-color="#fff" @change="change">
    <view class="popup_bg" :style="{'height': height}">
      <view class="popup_title"><text>{{title}}</text> <uni-icons type="closeempty" size="21" color="#999999" @click="onClose"></uni-icons> </view>
      <slot></slot>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue'
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue:{
    type: Boolean,
    default: false
  },
  title:{
    type: String,
    default: '配送跟踪'
  },
  height:{
    type: String,
    default: '60vh'
  },
  isMaskClick:{
    type: Boolean,
    default: true
  }
})
const popup = ref(null)
watch(
  () => props.modelValue,
  (newVal) => {
    if(newVal){
      popup.value && popup.value.open()
    }else{
      popup.value && popup.value.close()
    }
  },
  { immediate: true }
)

const onClose = ()=>{
  emits('update:modelValue', false)
}

const onTrack = ()=>{
  popup.value.open()
}
const change = (e)=>{
  emits(
    'update:modelValue',
    e.show
  )
}
</script>

<style scoped lang="scss">
.popup_bg, .popup_title{border-radius: 8px 8px 0 0;}
.popup_bg{background-color: #f8f8f9;}
.popup_title{ padding: 15px; font-size: 16px; color: #333; display: flex; justify-content: space-between; align-items: center; background-color: #fff;}
</style>